<script >
import KeywordChart from './KeywordChart.vue';
import { getKeywordData } from '@/api/keyworddata'
export default {
    components: {
        KeywordChart
    },
    data() {
        return {
            keywordData: [],
            currentPage: 1,
        }
    },
    mounted() {
        getKeywordData().then(res => {
            this.keywordData = res.data
            console.log(this.keywordData)
        })
    },
    computed: {
        totalSearchCount() {
            let total = 0
            this.keywordData.forEach(item => {
                total += item.totalSearch
            })
            return total
        },
        totalUserCount() {
            let total = 0
            this.keywordData.forEach(item => {
                total += item.totalUser
            })
            return total
        }
    },
    methods: {
        handlePageChange(page) {
            this.currentPage = page
        }
    }
}
</script>
<template>
    <div>
        <el-card style="margin-left: 10px;margin-right: 10px;">
            <div slot="header">
                <div class="title">关键词搜索</div>
            </div>
            <div class="content">
                <div class="content-chart">
                    <KeywordChart :data="keywordData" :num="totalUserCount" title="搜索用户数" yName="totalUser"></KeywordChart>
                    <KeywordChart :data="keywordData" :num="totalSearchCount" title="搜索量" yName="totalSearch">
                    </KeywordChart>
                </div>
                <div class="content-table">
                    <el-table :data="keywordData.slice(currentPage*6-6,currentPage*6)" style="width: 100%; text-align:center; margin:10px 0" >
                        <el-table-column prop="rank" label="排名" width="50" align="center"></el-table-column>
                        <el-table-column prop="keyWord" label="关键词" align="center"></el-table-column>
                        <el-table-column prop="totalSearch" label="搜索量" align="center"></el-table-column>
                        <el-table-column prop="totalUser" label="搜索用户数" align="center"></el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :total="keywordData.length" :page-size="6"
                        @current-change="handlePageChange" style="text-align: right;" >
                    </el-pagination>
                </div>
            </div>
        </el-card>
    </div>
</template> 
<style lang="scss" scoped>
.el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
}

.title {
    font-weight: 600;
}

.content-chart {
    display: flex;
    gap: 20px;
}
</style>
